<script lang="tsx">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'Nav',
})
export default class extends Vue {
  render() {
    return (
      <a
        class={{
          'nav': true,
          'selected': this.selected,
        }}
        href={ this.href }
        target={ this.target }
        onClick={ this.handleClick }
      >
        { this.$slots.default }
      </a>
    )
  }

  @Prop({ type: String, default: 'javascript:void(0)' }) href!:string

  @Prop({ type: String, default: '' }) target!:string

  @Prop({ type: Boolean, default: false }) selected!:boolean

  mounted() {
    if (this.$slots.default) {
      this.$slots.default.forEach(slot => {
        if (slot.elm && slot.elm instanceof HTMLElement) {
          slot.elm.style.display = 'inline-block'
        }
      })
    }
  }

  handleClick(e: any) {
    this.$emit('click', e)
  }
}
</script>
